<template>
  <div style="margin-left: 100px; margin-right: 120px">
    <div class="step">
      <!-- 进度条 -->
      <el-steps :active="active" finish-status="success">
        <el-step title="认证"></el-step>
        <el-step title="发布信息"></el-step>
        <el-step title="审核"></el-step>
      </el-steps>
      <el-button style="margin-top: 12px" @click="previous">上一步</el-button>
      <el-button style="margin-top: 12px" @click="next">下一步</el-button>
    </div>

    <!-- 确认表单信息 -->
    <div class="Confirmation_form">
      <h3 style="text-align: center; margin-top: 2vh">
        流浪的梦公益捐赠确认表
      </h3>
      <div class="text_info">
        <span>捐赠订单编号:xxxxxx</span>
        <br />
        <span>订单生成时间:xxxx年xx月xx日 xx：xx：xx</span>
        <br />
        <span>申请人id:xxx </span>
        <br />
        <span>身份证号:xxxx</span>
        <br />
        <span>学段:xxx </span>
        <br />
        <span>就读学校:xxxx</span>
        <br />
        <span>受助人信息:xxxx</span>
        <br />
        <span>出生日期:xxxx年xx月xx日</span>
        <br />
        <span>收款账号:xxxx </span>
        <br />
        <span>收款地址:xxxx</span>
        <br />
        <span>目标金额:xxx</span>
      </div>
      <img src="../../../assets/image/charity/待审核.png" alt="" />
    </div>
    <el-row style="margin-left: 50vw; margin-top: 4vh">
      <el-button type="warning" round @click="toRouter('/charity/auditsuccess')"
        >确定</el-button
      >
      <el-button type="danger" round @click="toRouter('/charity/infocharity')"
        >返回</el-button
      >
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 1,
    };
  },
  methods: {
    //路由跳转
    toRouter(path) {
      this.$router.push(path);
    },
    //返回上一步
    previous() {
      this.active = this.active--;
      if (this.active-- < 0) return;
    },
    //下一步
    next() {
      if (this.active++ > 2) this.active = 0;
    },
  },
};
</script>
<style >
.step {
  margin-right: 50px;
  border: 2px solid gray;
  padding: 10px;
  border-radius: 5px;
  background-color: rgb(236, 196, 163);
}
.Confirmation_form {
  width: 700px;
  height: 400px;
  border: 1px solid black;
  margin-left: 15vw;
  margin-top: 2vh;
}
.text_info {
  /* text-align: center; */
  margin-top: 3vh;
  margin-left: 20vw;
}
.text_info > span {
  line-height: 1.5em;
}
.Confirmation_form > img {
  width: 30vw;
  height: 25vh;
  margin-left: 350px;
  margin-top: -150px;
}
</style>
